import React, { useRef, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Myuser from '../../components/Myuser'
import { List, Modal, Checkbox, Button, Form, Input } from 'antd-mobile'
import { addper, changestatus, delper, editper } from '../../store/userslice'
import { useNavigate } from 'react-router-dom'
import { FillinOutline, DeleteOutline } from 'antd-mobile-icons'
import { Cell, Dialog, Toast } from 'react-vant'
import dayjs from 'dayjs'
import { orcapi } from '../../request/api'
function Index() {
  let img = useRef()
  let nav = useNavigate()
  const { perlist } = useSelector(state => state.userslice)
  const dispatch = useDispatch()
  const [form] = Form.useForm()
  // 添加
  const [visible1, setVisible1] = useState(false)
  let [title, settitle] = useState('')
  let tianjia = () => {
    // 弹出弹框
    settitle('新增')
    setVisible1(true)
  }
  let xiugai = (item) => {
    // console.log('111', item)
    // 弹出弹框
    settitle('修改')
    setVisible1(true)
    form.setFieldsValue({ ...item, id: item.id })

  }
  const onFinish = (values) => {
    if (title == '修改') {
      let obj = form.getFieldsValue(true)
      dispatch(editper(obj))
      setVisible1(false)
      form.resetFields()
    } else {
      dispatch(addper({ ...values, status: false, id: new Date() }))
      setVisible1(false)
      form.resetFields()
    }
  }

  let tostatus = (item) => {
    dispatch(changestatus({ id: item.id, status: item.status }))
    console.log('item', item)
  }
  // 删除
  const [visible, setVisible] = useState(false)
  let handdel = (item) => {
    console.log('it', item)
    setVisible(true)
    dispatch(delper({ id: item.id }))
  }

  // 上传身份证
  let handleup = () => {
    img.current.click()
    img.current.addEventListener('change', (e) => {
      console.log('e', e)
      let files=e.target.files[0]
      let filedata=new FormData()
      filedata.append('file',files)
      orcapi(filedata).then(res=>{
        console.log('ooo',res)
        if(res.data.code==200){
          form.setFieldsValue(res.data.data)
        }
      })
    })
  }
  return (
    <div>
      <input type='file' style={{ display: 'none' }} ref={img}></input>
      {/* 删除的确认 */}

      <Modal
        visible={visible}
        content='确认删除当前乘车人吗'
        closeOnAction
        onClose={() => {
          setVisible(false)

        }}
        actions={[
          {
            key: 'confirm',
            text: '确定',
            onConfirm: () => {

            }
          },
          {
            key: 'cancle',
            text: '取消',
          },
        ]}
      />

      {/* -------------------------------------------------- */}
      {/* 添加和修改的弹框 */}

      <Modal
        visible={visible1}
        content={
          <Form
            onFinish={onFinish}
            form={form}
            layout='horizontal'
            footer={
              <Button block type='submit' color='primary' size='large'>
                提交
              </Button>
            }
          >
            <Form.Header>{title}</Form.Header>
            <Button style={{ marginLeft: '30%' }} onClick={() => handleup()}>上传身份证</Button>
            <Form.Item
              name='name'
              label='姓名'
              rules={[{ required: true, message: '姓名不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入姓名' />
            </Form.Item>
            <Form.Item
              name='code'
              label='身份证'
              rules={[{ required: true, message: '身份证不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入身份证' />
            </Form.Item>
            <Form.Item
              name='phone'
              label='手机号'
              rules={[{ required: true, message: '手机号不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入手机号' />
            </Form.Item>


          </Form>

        }
        closeOnAction
        onClose={() => {
          setVisible(false)
        }}

      />
      {/* ================================================== */}
      <div style={{ display: 'none' }}>
        <Myuser data={perlist}></Myuser>
      </div>
      {/* 列表 */}
      <List header='乘车人列表'>
        <Button onClick={() => tianjia()}>添加乘车人</Button>
        {
          perlist.map((item, index) => {
            return <List.Item key={index} description={item.code}
              // 左侧
              prefix={
                <FillinOutline onClick={() => xiugai(item)} />
              }
              // 右侧
              extra={
                <div><Checkbox defaultChecked={item.status}
                  onChange={() => tostatus(item)}></Checkbox>
                  {/* 删除 */}
                  <DeleteOutline onClick={() => handdel(item)} /></div>
              } >
              {item.name} <span style={{ color: '#ccc', fontSize: '12px' }}>{item.type}</span></List.Item>
          })
        }
      </List>
      <div style={{ position: 'fixed', bottom: '0', width: '100%' }}>
        <Button block color='primary' size='large' onClick={() => nav(-1)}>
          确定
        </Button>
      </div>

    </div>
  )
}

export default Index
